<template>
  <div id="studentpagecontainer" class="studentpagecontainer" ref="container">
    <div class="content2">
      <!--模块名称-->
      <!-- <el-row> -->
        <!-- <div class="modelname">学员管理</div> -->
      <!-- </el-row> -->
      <!-- 搜索框-->
      <el-row>
        <div class="search-box">
          <el-col :span="24">
            <el-select
              style="width:2.01rem;"
              clearable
              v-model="selectState"
              @change="changeCourse"
              placeholder="课程状态"
            >
              <template v-for="item in coursestatelist">
                <el-option v-if="item.value==1" label="未进班" :key="item.value" :value="item.value"></el-option>
                <el-option
                  v-else-if="item.value==2"
                  label="已进班"
                  :key="item.value"
                  :value="item.value"
                ></el-option>
                <el-option v-else :label="item.name" :key="item.value" :value="item.value"></el-option>
              </template>
            </el-select>
            <el-select
              style="width:2.01rem;"
              clearable
              filterable
              v-model="classId"
              placeholder="请选择班级"
            >
              <el-option
                v-for="item in selectClassList"
                :label="item.name"
                :key="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              style="width:2.01rem;"
              filterable
              clearable
              v-model="courseId"
              placeholder="请选择课程"
            >
              <template v-for="item in selectCourseList">
                <el-option :label="item.name" :key="item.value" :value="item.value"></el-option>
              </template>
            </el-select>
            <!-- <el-select v-if="false" style="width:2.01rem;" clearable v-model="courseId" placeholder="选择进班情况">
              <el-option label="已进班" value="1"></el-option>
              <el-option label="未进班" value="2"></el-option>
            </el-select>-->
            <el-input
              style="width:3rem;"
              @keyup.enter.native="searchData(1)"
              placeholder="学员名称/电话"
              v-model="searchText"
              class="input-with-select"
            ></el-input>
            <div
              class="search_btn"
              @click="searchData(1)"
              v-if="hasApi('getCampusStudentList')"
              style="margin-left:0.05rem;"
            >搜索</div>
            <div
              class="exportBtn"
              v-if="exportstate&&hasApi('exportStudent')"
              @click="exportstudent"
            >
              <!--<img src="../../assets/img/education_manage/export.png" />-->
              导出学员
            </div>
            <div
              class="exportBtn"
              v-else-if="hasApi('exportStudent')"
              style="cursor: not-allowed;"
            >导出学员</div>
          </el-col>
        </div>
      </el-row>
      <!--学员列表-->
      <el-row>
        <div class="student_li" v-if="studentlist" v-for="item in studentlist">
          <div class="li_header">
            <div v-if="hasApi('visitAdd')" class="operate" @click.stop="returnVisit(item)">
              <img src="../../assets/img/common/returnvisit_icon.png" />
              <span>回访</span>
            </div>
            <div v-if="hasApi('renew')" class="operate" @click.stop="openEnroll(item)">
              <img src="../../assets/img/common/renew_icon.png" />
              <span>续费</span>
            </div>
            <div class="operate" @click.stop="editor(item)">
              <img src="../../assets/img/common/editor_icon.png" />
              <span>查看</span>
            </div>
          </div>
          <div class="li_body">
            <el-row>
              <el-col :span="12">
                <div class="student-imgbox">
                  <img :src="item.photo" />
                  <div class="check"></div>
                </div>
                <div class="student_info">
                  <div class="item contentEllipsis" @click.stop="studentSelect(item)">
                    <span
                      style="font-size:.22rem;cursor:pointer;font-weight:bold;font-family: 'microsoft yahei';color: #333333;"
                    >{{item.realName||""}}</span>
                  </div>
                  <div class="item contentEllipsis">
                    <span>ID：</span>
                    <span>{{item.studentNo}}</span>
                  </div>
                  <div class="item">
                    <span>年龄：</span>
                    <span>{{item.age}}</span>
                  </div>
                  <div class="item">
                    <span>生日：</span>
                    <span>{{item.birthday||""}}</span>
                  </div>
                </div>
                <div class="student_info" style="float:right;">
                  <div class="item"></div>
                  <div class="item contentEllipsis" :title="item.parentName">
                    <span>家长：</span>
                    <span>{{item.parentName||""}}</span>
                  </div>
                  <div class="item">
                    <span>电话：</span>
                    <span style="font-weight: bold;">{{item.phone||""}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="1">
                <div class="verticalline"></div>
              </el-col>
              <el-col :span="11">
                <div class="course_info" style="cursor: pointer;" @click="showCourlist(item)">
                  <div class="total_num" style="color:#3885f8;">{{item.courseCount||0}}</div>
                  <div class="title">已报课程</div>
                </div>
                <div class="course_info">
                  <div class="total_num" style="color:#FFB81F;">￥{{item.contractValue||0}}</div>
                  <div class="title">合同金额</div>
                </div>
                <div class="course_info">
                  <div class="total_num" style="color:#96D34D;">￥{{item.usedCourseValue||0}}</div>
                  <div class="title">课耗</div>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-collapse-transition>
            <div class="coursedetaillist" v-if="item.isShow">
              <div class="pageList">
                <div class="tablecss">
                  <table style="width:100%;" cellpadding="0" cellspacing="0">
                    <thead>
                      <tr>
                        <th>课程名称</th>
                        <th>报名时间</th>
                        <th>开课时间</th>
                        <th>数量</th>
                        <th>单位</th>
                        <th>签到</th>
                        <th>请假</th>
                        <th>补课</th>
                        <!-- <th>迟到</th> -->
                        <th>旷课</th>
                        <th>状态</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody v-if="item.courseList.length>0">
                      <tr v-for="li in item.courseList">
                        <td align="center">
                          {{li.courseName||""}}
                          <br />
                          {{li.className||""}}
                        </td>
                        <td align="center">{{li.createTime}}</td>
                        <td align="center">{{li.startTime}}</td>
                        <td align="center">{{li.courseBuyNum}}</td>
                        <td align="center">
                          <span v-if="li.courseType==2">
                            <span v-if="li.courseTimeMode==1">年</span>
                            <span v-else-if="li.courseTimeMode==2">半年</span>
                            <span v-else-if="li.courseTimeMode==3">季度</span>
                            <span v-else-if="li.courseTimeMode==4">月</span>
                            <span v-else-if="li.courseTimeMode==5">周</span>
                          </span>
                          <span v-else-if="li.courseType == 4">节</span>
                          <span v-else>课时</span>
                        </td>
                        <td align="center">{{li.siginTimes}}</td>
                        <td align="center">{{li.leaveTimes}}</td>
                        <td align="center">{{li.makeupTimes}}</td>
                        <!-- <td align="center">{{li.lateTimes}}</td> -->
                        <td align="center">{{li.absentTimes}}</td>
                        <td align="center">
                          <span>{{coursestateObj[li.courseStatus]}}</span>
                        </td>
                        <td align="center">
                          <!-- 屏蔽全日制退课 -->
                          <el-button
                            @click="returnFund(li,item)"
                            v-if="(li.courseStatus=='1'||li.courseStatus=='2')&&hasApi('refund')"
                            type="text"
                          >退费</el-button>
                          <span v-if="li.courseStatus=='3'||li.courseStatus=='4'">-</span>
                          <el-popover
                            placement="bottom"
                            title
                            width="150"
                            trigger="click"
                            v-model="li.popoverShow"
                          >
                            <div class="attendpopover">
                              <!--<div class="selectbox" v-if="hasApi('changeClass')" @click="changeClass(li,item)">转班</div>-->
                              <div
                                class="selectbox"
                                @click="studentAttend(li,item)"
                                v-if="hasApi('simpleAttendence')"
                              >学员考勤</div>
                              <div
                                class="selectbox"
                                v-if="li.courseType!=2 && hasApi('stopCourse')"
                                @click="stopCourse(li)"
                              >停课</div>
                            </div>
                            <el-button v-if="li.courseStatus=='2'" slot="reference" type="text">更多</el-button>
                          </el-popover>
                          <el-button
                            @click="selectClass(li,item)"
                            v-if="li.courseStatus=='1' && hasApi('studentEnterClass')"
                            type="text"
                          >选班</el-button>
                          <!-- 屏蔽全日制退课 -->
                          <el-button
                            @click="returnFund(li,item)"
                            v-if="li.courseStatus=='5'&&hasApi('refund')"
                            type="text"
                          >退费</el-button>
                          <span></span>
                          <el-button
                            @click="recovery(li,item)"
                            v-if="li.courseStatus=='5'&&li.courseType!=2 && hasApi('recoverClass')"
                            type="text"
                          >恢复</el-button>
                          <span v-if="li.courseStatus=='6'">-</span>
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="11" align="center">暂无数据</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </el-collapse-transition>
          <div class="shrink" v-if="item.isShow">
            <div class="shrinkicon" @click="shrinkStudentList(item)"></div>
          </div>
        </div>
      </el-row>
      <!--分页-->
      <el-row style="margin-top:.2rem;margin-bottom:.2rem;">
        <div class="pagePanel">
          <el-pagination
            class="page"
            @current-change="curChange"
            :page-size="pager.pagesize"
            @size-change="pageSizeChange"
            :current-page="pager.currpage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pager.totalnum"
          ></el-pagination>
        </div>
      </el-row>
      <!--学员信息框-->
      <studentdetails :studentdetailprop="studentdetailprop"></studentdetails>
      <!--跟踪回访-->
      <visitAdd ref="visitAdd"></visitAdd>
      <!--编辑学员资料-->
      <editorStuInfo :student="studentdetailprop"></editorStuInfo>
      <!--学生相册-->
      <studentImage></studentImage>
      <!--选班-->
      <selectClass :studentdetailprop="studentdetail"></selectClass>
      <!--退课-->
      <dropClass ref="dropClass" :studentdetailprop="studentdetailprop"></dropClass>
      <!--学员考勤-->
      <studentAttence :studentdetailprop="studentdetailprop"></studentAttence>
      <!--转班-->
      <changeClass :studentdetailprop="studentdetailprop" @backselect="()=>{}" @suceess="initData"></changeClass>
      <!--续费-->
      <clueEnroll ref="clueEnroll"></clueEnroll>
      <!--加载面板-->
      <loading ref="loading"></loading>
      <!-- 班级详情-->
      <classdetail></classdetail>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import studentdetails from "./common/studentdetails";
import returnVisit from "./common/returnVisit";
import editorStuInfo from "./common/editorStuinfo";
import studentImage from "./common/studentImage";
import selectClass from "./common/selectClass";
import dropClass from "./common/dropClass";
import studentAttence from "./common/studentAttence";
import changeClass from "./common/changeClass";
import visitAdd from "../clue_manage/subpage/visit_add";
import clueEnroll from "../clue_manage/subpage/clue_enroll";
import loading from "../common/loading";
import classdetail from "./common/classdetail";
let vm;
export default {
  components: {
    studentdetails,
    returnVisit,
    editorStuInfo,
    studentImage,
    selectClass,
    dropClass,
    studentAttence,
    changeClass,
    visitAdd,
    clueEnroll,
    loading,
    classdetail
  },
  data() {
    return {
      loadingObj: null,
      studentdetailprop: null, //传递给子组件的参数
      studentdetail: null, //传递给选班组件的参数
      coursestatelist: [], //课程状态数据字典
      selectClassList: [], //班级列表
      selectCourseList: [], //课程列表
      coursestateObj: {}, //数据字典对象
      studentlist: [], //学员列表
      pager: {
        //分页
        pagesize: 10,
        totalnum: 0,
        currpage: 1
      },
      classId: "", //选中的班级
      courseId: "", //选中的课程
      selectState: "", //选中的课程状态
      searchText: "", //搜索框内容
      popover: false, //更多提示框是否显示
      exportstate: true, //导出excel按钮状态 true为正在下载
      exportNotification: null //导出excel状态通知
    };
  },
  methods: {
    /**
     * 数据初始化
     */
    initData() {
      let $parent = $(".home_content");
      //获取数据字典
      let campusId = this.$store.state.campusId;
      let dicdata = tool.getItem(lsKey.dict, true);
      this.coursestatelist = dicdata["course_status"]; //获取课程状态数据字典列表

      for (let i = 0; i < this.coursestatelist.length; i++) {
        this.coursestateObj[
          this.coursestatelist[i]["value"]
        ] = this.coursestatelist[i]["name"];
      }
      //班级初始化
      api.getclassalllist({ campusId: campusId }).then(function(d) {
        // console.log(d)
        if (d.result == "操作成功") {
          let classlist = d.list;
          vm.selectClassList = classlist.map(function(row) {
            return { name: row.className, value: row.classId };
          });
        }
      });
      //课程初始化
      api.courseList({ campusId: campusId, currPage: -1 }).then(function(d) {
        // console.log(d)
        if (d.result == "操作成功") {
          let courselist = d.list;
          vm.selectCourseList = courselist.map(function(row) {
            return { name: row.courseName, value: row.courseId };
          });
        }
      });
      //学员信息列表
      this.searchData();

      $parent.finish().animate({ scrollTop: 0 }, 500); //回到顶部
    },
    /*
     * 校区改变
     */
    campusChange(campusId) {
      vm.searchData(1);
    },
    /**
     * 获取列表数据
     */
    searchData(index) {
      if (index) {
        this.pager.currpage = 1;
      }

      //设置请求校区学员列表参数keyword:this.searchText,
      let paras = {
        campusId: vm.$store.state.campusId,
        classStatusMode: this.selectState,
        keyword: this.searchText,
        currPage: this.pager.currpage,
        pageSize: this.pager.pagesize,
        classId: this.classId,
        courseId: this.courseId
      };
      let studentlisttemp = []; //临时存放班级列表

      api
        .getCampusStudentList(paras)
        .then(function(data) {
          if (data.result == "操作成功") {
            vm.studentlist = []; //清空学员
            studentlisttemp = data.listStudent.records;

            vm.pager.totalnum = Number(data.listStudent.total);

            for (let i = 0; i < studentlisttemp.length; i++) {
              studentlisttemp[i].isShow = false;
              studentlisttemp[i].age = tool.minusDate(
                studentlisttemp[i].birthday
              );
              studentlisttemp[i].photo =
                studentlisttemp[i].photo ||
                require("../../assets/img/common/top_portait.png");
              if (studentlisttemp[i].birthday != null) {
                let birth = studentlisttemp[i].birthday.split("-");
                studentlisttemp[i].birthday = birth[0] + "-" + birth[1];
              }
            }

            vm.studentlist = studentlisttemp;
          }
        })
        .catch(function(data) {
          //	vm.loadingObj.closeLoading();
        });
    },

    /**
     * 显示课程列表
     */
    showCourlist(item) {
      let $parent = $(".home_content");
      let rem = screen.width / 19.2;
      let position = 1.08;
      let studentId = item.studentId;

      api
        .listStudentCourse({ campusId: vm.$store.state.campusId, studentId: studentId })
        .then(function(d) {
          // console.log(d)
          if (d.result == "操作成功") {
            item.courseList = d.listStudentCourse;
            if (item.courseList.length > 0) {
              for (let i = 0; i < vm.studentlist.length; i++) {
                if (studentId == vm.studentlist[i].studentId) {
                  vm.studentlist[i].isShow = true;
                  vm.studentlist[i].popoverShow = false;
                  position = 1.08 + i * 2.05;

                  $parent.finish().animate({ scrollTop: position * rem }, 500); //回到顶部
                } else {
                  vm.studentlist[i].isShow = false;
                }
              }
            }
          }
        });
    },
    /**
     * 页码改变触发
     */
    pageSizeChange(val) {
      this.pager.pagesize = val;
      this.searchData();
    },
    /**
     * 收缩课程列表
     */
    shrinkStudentList(item) {
      let studentId = item.studentId;
      //let curCourse;

      for (let i = 0; i < vm.studentlist.length; i++) {
        if (studentId == vm.studentlist[i].studentId) {
          vm.studentlist[i].isShow = false;
        }
      }
    },
    /**
     * 学员详情
     */
    studentSelect(row) {
      vm.studentdetailprop = row;
      api
        .listStudentCourse({ campusId: vm.$store.state.campusId, studentId: vm.studentdetailprop.studentId })
        .then(function(d) {
          // console.log(d)
          if (d.result == "操作成功") {
            vm.studentdetailprop.courseList = d.listStudentCourse;
             vm.$store.dispatch("studentmanage/showstudetailsPanel");
              vm.$store.dispatch(
                "studentmanage/setstuId",
                vm.studentdetailprop.studentId
              );
              vm.$store.dispatch(
                "studentmanage/setclueId",
                vm.studentdetailprop.clueId
              );
              vm.$store.dispatch("studentmanage/getstudentInfo");
          }
        });

     
    },
    /**
     * 相册查看暂时未用到
     */
    selectalbum(row) {
      this.studentdetailprop = row;
      this.$store.dispatch("studentImage/showimagePanel");
    },
    /**
     * 回访
     */
    returnVisit(row) {
      let paras = { clueId: row.clueId };
      api.clueInfo(paras).then(function(data) {
        let clue = data.info;
        vm.$refs.visitAdd.init(clue);
      });
    },

    /**
     * 编辑学员
     */
    editor(row) {
      tool.change(0, "", row, ["studentParentEntityList.parentMode"]);
      this.studentdetailprop = {
        genderMode: row.genderMode,
        grade: row.grade == 0 ? "" : row.grade,
        kindergarten: row.kindergarten,
        photo: row.photo,
        studentId: row.studentId,
        studentParentEntityList: row.studentParentEntityList,
        realName: row.realName,
        studentNo: row.studentNo,
        courseList: row.courseList,
        studentUserAddressEntity: row.studentUserAddressEntity,
        birthday: row.birthday,
        campusId: row.campusId,
        clueId: row.clueId,
        studentParentEntityList: row.studentParentEntityList,
        nickName: row.nickName,
        familyAddress: row.familyAddress
      };
      this.$store.dispatch("editorStuInfo/showeditorPanel");
    },
    /**
     * 分页
     */
    curChange(val) {
      this.pager.currpage = val;
      this.searchData();
    },
    /**
     * 选班
     */
    selectClass(row, item) {
      this.studentdetail = row;
      this.studentdetail.realName = item.realName;
      this.studentdetail.studentId = item.studentId;
      this.studentdetail.remark = item.remark;
      let paras = {
        campusId: vm.$store.state.campusId,
        coursePackageId: row.coursePackageId,
        studentId: row.studentId,
        studentCourseId: row.studentCourseId
      };

      this.$store.dispatch("selectClass/showselectClassPanel");
      this.$store.dispatch("selectClass/getCourselist", paras);
    },

    /**
     * 学员考勤
     */
    studentAttend(row, item) {
      row.popoverShow = false;
      this.studentdetailprop = row;
      this.studentdetailprop.realName = item.realName;
      this.studentdetailprop.studentId = item.studentId;
      let paras = {
        classId: row.classId,
        studentId: item.studentId,
        keyName: ""
      };
      //console.log(paras)
      this.$store.dispatch("studentAttence/getStudentAttendList", paras);
    },
    /**
     * 停课
     */
    stopCourse(row) {
      row.popoverShow = false;
      let paras = {
        studentCourseId: row.studentCourseId,
        courseStatus: "5",
        classId: row.classId
      };
      this.$confirm("确定要停止“" + row.courseName + "”课程吗？", "停课", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //停课接口操作
          api.stopCourse(paras).then(function(data) {
            if (data.result == "操作成功") {
              vm.initData(); //初始化数据
              vm.$message({
                type: "success",
                message: "停课成功!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消停课"
          });
        });
    },
    /**
     * 恢复
     * 原班未停课：直接恢复到原来班级；
     * 原班已经停课：退费/转班
     */
    recovery(row, item) {
      /**
       * 请求恢复至原班
       * 成功：恢复至原班
       * 失败：询问转班/退费
       */
      api
        .recoverClass({
          classId: row.classId,
          studentId: item.studentId,
          studentCourseId: row.studentCourseId
        })
        .then(function(d) {
          // debugger
          //恢复成功
          if (d.resultCode === 2000) {
            vm.$message({
              type: "success",
              message: "恢复成功！"
            });
            vm.initData(); //初始化数据
            //显示班级信息
            vm.$store.dispatch("classdetail/getClassInfo", {
              classId: row.classId
            });
          }
          //询问转班/退费
          else if (d.resultCode === 4061) {
            vm.$confirm("原班级已经停课，您可选择 转班/退费", "提示", {
              customClass: "recovery-popup",
              confirmButtonText: "转班",
              cancelButtonText: "退费",
              type: "warning",
              center: true,
              distinguishCancelAndClose: true,
              closeOnClickModal: false,
              closeOnPressEscape: false
            })
              .then(() => {
                vm.changeClass(row, item);
              })
              .catch(action => {
                if (action === "cancel") {
                  vm.returnFund(row, item);
                }
              });
          }
          //异常
          else {
            vm.$message({
              type: "warning",
              message: d.message || "操作失败"
            });
          }
        });
    },
    /**
     * 转班
     */
    changeClass(row, item) {
      //跳至转班
      this.studentdetailprop = item;
      if (
        item.studentParentEntityList &&
        item.studentParentEntityList.length > 0
      ) {
        let parentobj = item.studentParentEntityList[0];
        this.studentdetailprop.parentName = parentobj.parentName;
        this.studentdetailprop.phone = parentobj.phone;
      }
      let paras = {
        campusId: this.$store.state.campusId,
        studentCourseId: row.studentCourseId,
        classId: row.classId,
        studentId: item.studentId
      };
      this.$store.dispatch("changeClass/getCourselist", paras);
    },
    /**
     * 退费、退课
     */
    returnFund(row, item) {
      //this.studentdetailprop=item;
      let paras = { studentCourseId: row.studentCourseId };
      this.$store.dispatch("dropClass/getCourseInfo", paras);
      this.$refs.dropClass.setInfo(item,row);
    },

    /**
     * 续费
     *
     */
    openEnroll(row) {
      let studentId = row.studentId;
      let paras = { clueId: row.clueId };
      api.clueInfo(paras).then(function(data) {
        let clue = data.info;
        clue.studentId = studentId;
        clue.name = "续费";
        clue.courseList = row.courseList;
        vm.$refs.clueEnroll.init(clue);
      });
    },
    /**
     * 课程状态改变
     */
    changeCourse(val) {
      this.searchData(1);
    },
    /**
     * 导出学员
     */
    exportstudent() {
      let param = {
        campusId: vm.$store.state.campusId,
        keyword: vm.searchText,
        classStatusMode: vm.selectState
      };
      vm.exportstate = false;

      vm.exportNotification = vm.$notify({
        title: "学员导出处理中...",
        message: "请稍候，无须重复操作",
        iconClass: "el-icon-loading",
        duration: 0,
        showClose: false
      });

      api
        .exportStudent(param)
        .then(function(data) {
          let blob = new Blob([data.data], {
            type: "application/vnd.ms-excel"
          });
          let filename = decodeURI(
            data.headers["content-disposition"].split(";")[1].split("=")[1]
          );
          let downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob);
          //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = filename;
          //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click();
          //点击下载
          document.body.removeChild(downloadElement);
          //下载完成移除元素
          window.URL.revokeObjectURL(href);

          vm.exportstate = true;

          vm.exportNotification.close();

          vm.exportNotification = vm.$notify({
            type: "success",
            title: "学员导出成功",
            message: "请保存至本地",
            duration: 4000,
            showClose: false
          });
          //释放掉blob对象
          return data.data;
        })
        .catch(function(e) {
          vm.exportstate = true;
          vm.exportNotification.close();
          vm.exportNotification = vm.$notify({
            title: "",
            type: "error",
            message: "请求数据失败...",
            duration: 2000,
            showClose: false
          });
        });
    }
  },
  mounted() {
    vm = this;
    //	this.loadingObj=this.$refs.loading;
    this.initData();
  }
};
</script>

<style  lang="scss">
@import "@/style/module/utils.scss";
.studentpagecontainer {
	padding-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  .content2 {
    margin: 0 auto;
    min-width: 15.6rem;
    width: 15.6rem;
    .modelname {
      width: 100%;
      height: 0.6rem;
      font-size: $modelTitleFontSize;
      color: #141414;
      line-height: 0.6rem;
      font-family: "microsoft yahei";
      font-weight: bold;
    }
    .exportBtn {
      height: 0.36rem;
      width: 1.76rem;
      line-height: 0.36rem;
      text-align: center;
      font-size: 0.16rem;
      background-image: url(../../assets/img/education_manage/export.png);
      background-size: 0.18rem 0.18rem;
      background-repeat: no-repeat;
      background-position: 0.35rem center;
      color: #ffffff;
      border-radius: 0.08rem;
      cursor: pointer;
      display: inline-block;
      background-color: #3885f8;
      &:hover {
        background-color: rgba(56, 133, 248, 0.8);
      }
    }
    .student_li {
      width: 100%;
      max-height: 30rem;
      margin-top: 0.12rem;
      background: #ffffff;
      border-radius: 0.1rem;
      border: 1px solid #ededed;
      .li_header {
        width: 100%;
        height: 0.4rem;
        border-bottom: 1px solid #f3f6fb;
        .operate {
          height: 0.4rem;
          float: right;
          margin-right: 0.5rem;
          line-height: 0.4rem;
          cursor: pointer;
          span {
            float: left;
            color: #999999;
            font-size: 0.16rem;
            text-indent: 0.05rem;
          }
          img {
            float: left;
            width: 0.26rem;
            height: 0.26rem;
            margin-top: 0.07rem;
          }
        }
      }
      .li_body {
        width: 100%;
        height: 1.51rem;
        padding: 0.12rem 0.3rem;
        .student-imgbox {
          width: 1.12rem;
          height: 1.12rem;
          border: 1px solid #ededed;
          border-radius: 100%;
          float: left;
          img {
            width: 1.12rem;
            height: 1.12rem;
            border-radius: 100%;
            /* border:1px solid red;	*/
          }
          .check {
            width: 0.3rem;
            height: 0.3rem;
            background: url(../../assets/img/common/check_icon.png);
            background-size: cover;
            position: absolute;
            top: 0.8rem;
            left: 0.9rem;
          }
        }
        .verticalline {
          width: 1px;
          height: 0.95rem;
          margin: 0.16rem auto;
          background: $partinglineColor;
        }
        .student_info {
          width: 30%;
          height: 1.27rem;
          float: left;
          margin-left: 0.5rem;
          .item {
            width: 100%;
            height: 0.3175rem;
            line-height: 0.3175rem;
            font-size: 0.18rem;
            font-family: "microsoft yahei";
            color: #666666;
          }
        }
        .course_info {
          width: 33.333%;
          height: 0.95rem;
          float: left;
          .title {
            height: 0.2rem;
            width: 100%;
            text-align: center;
            color: #666666;
          }
          .total_num {
            height: 0.75rem;
            width: 100%;
            text-align: center;
            font-size: 0.38rem;
            line-height: 0.75rem;
            font-weight: bold;
            color: #666666;
          }
        }
      }
      .coursedetaillist {
        width: 100%;
        max-height: 28rem;
        padding: 0.1rem 0.3rem;
        border-top: 1px solid #f3f6fb;
      }
      .shrink {
        width: inherit;
        height: 0.32rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .shrinkicon {
          width: 0.18rem;
          height: 0.18rem;
          background: url(../../assets/img/common/arrow_up.png);
          background-size: cover;
          position: absolute;
          left: 50%;
          margin-left: -0.16rem;
          opacity: 1;
          cursor: pointer;
        }
      }
    }
  }
}
// 停课恢复询问弹窗
.recovery-popup {
  .el-message-box__content {
    font-size: 0.16rem !important;
  }
  .el-button,
  .el-button--small {
    font-size: 0.16rem !important;
  }
}
</style>